<!DOCTYPE html>
<!-- saved from url=(0080)https://juejin.im/book/5bdc715fe51d454e755f75ef/section/5c024ecbf265da616a476638 -->
<html lang="zh-CN">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no,viewport-fit=cover">
  <meta name="google-site-verification" content="cCHsgG9ktuCTgWgYfqCJql8AeR4gAne4DTZqztPoirE">
  <meta name="apple-itunes-app" content="app-id=987739104">
  <meta name="baidu-site-verification" content="qiK2a1kcFc">
  <meta name="360-site-verification" content="4c3c7d57d59f0e1a308462fbc7fd7e51">
  <meta name="sogou_site_verification" content="c49WUDZczQ">
  <style>
    body {
      font-size: 16px;
      line-height: 2;
    }

    a,
    button,
    input {
      margin: 1rem 1.5rem;
    }

    img {
      width: 0;
      height: 0;
    }

    #juejin {
      overflow-x: hidden;
    }
  </style>
  <title data-vue-meta="true">前端面试之道 - yck - 掘金小册</title>
  <link rel="apple-touch-icon" sizes="180x180" href="https://b-gold-cdn.xitu.io/favicons/v2/apple-touch-icon.png">
  <link rel="icon" type="image/png" sizes="32x32" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon-16x16.png">
  <link rel="manifest" href="https://b-gold-cdn.xitu.io/favicons/v2/manifest.json">
  <link rel="mask-icon" href="https://b-gold-cdn.xitu.io/favicons/v2/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="https://b-gold-cdn.xitu.io/favicons/v2/favicon.ico">
  <meta name="msapplication-config" content="https://b-gold-cdn.xitu.io/favicons/v2/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
  <link rel="search" title="掘金" href="https://b-gold-cdn.xitu.io/conf/search.xml"
    type="application/opensearchdescription+xml">
  <link rel="stylesheet" href="./1-小册食用指南_files/ionicons.min.css">
  <link rel="stylesheet" href="./1-小册食用指南_files/iconfont.css">
  <link href="./1-小册食用指南_files/0.20e96f0e16539d696fbd.css" rel="stylesheet">
  <script async="" src="./1-小册食用指南_files/hm.js.下载"></script>
  <script async="" src="./1-小册食用指南_files/analytics.js.下载"></script>
  <script type="text/javascript" async="" src="./1-小册食用指南_files/vds.js.下载"></script>
  <script charset="utf-8" src="./1-小册食用指南_files/13.46a6fc9d409a46c2798c.js.下载"></script>
  <meta data-vmid="keywords" name="keywords"
    content="掘金,稀土,Vue.js,微信小程序,Kotlin,RxJava,React Native,Wireshark,敏捷开发,Bootstrap,OKHttp,正则表达式,WebGL,Webpack,Docker,MVVM"
    data-vue-meta="true">
  <meta data-vmid="description" name="description"
    content="掘金是一个帮助开发者成长的社区，是给开发者用的 Hacker News，给设计师用的 Designer News，和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货，其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时，掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户，我们相信你也可以在这里有所收获。"
    data-vue-meta="true">
</head>

<body>
  <div id="juejin" data-v-514f306c="">
    <div class="global-component-box" data-v-514f306c="">
      <!---->
      <div data-v-71cabb60="" data-v-514f306c="" class="alert-list alert-list"></div>
      <!---->
      <!---->
      <!---->
      <div class="emoji-barrage" data-v-e5f49d52="" data-v-514f306c="">
        <!---->
      </div>
      <div class="book-new-user-award-popup" style="display:none;" data-v-71b0e7b2="" data-v-514f306c="">
        <div class="content-box" style="display:block;" data-v-71b0e7b2="">
          <div class="close ion-close-round" data-v-71b0e7b2=""></div>
          <div class="header" data-v-71b0e7b2="">
            <div class="icon" data-v-71b0e7b2=""><img src="./1-小册食用指南_files/icon.a87e5ae.svg" data-v-71b0e7b2=""></div>
            <div class="txt" data-v-71b0e7b2="">新人专享好礼</div>
          </div>
          <div class="desc" data-v-71b0e7b2="">凡未购买过小册的用户，均可领取三张 5 折新人专享券，购买小册时自动使用专享券，最高可节省 45 元。</div>
          <div class="tickets" data-v-71b0e7b2="">
            <div class="ticket" data-v-71b0e7b2="">
              <div class="ticket__inner" data-v-71b0e7b2="">
                <div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div>
                <div class="sale" data-v-71b0e7b2="">最高可省 15 元</div>
              </div>
            </div>
            <div class="ticket" data-v-71b0e7b2="">
              <div class="ticket__inner" data-v-71b0e7b2="">
                <div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div>
                <div class="sale" data-v-71b0e7b2="">最高可省 15 元</div>
              </div>
            </div>
            <div class="ticket" data-v-71b0e7b2="">
              <div class="ticket__inner" data-v-71b0e7b2="">
                <div class="enjoy" data-v-71b0e7b2=""><span class="new-title" data-v-71b0e7b2="">小册新人 5 折券</span></div>
                <div class="sale" data-v-71b0e7b2="">最高可省 15 元</div>
              </div>
            </div>
          </div>
          <div class="remark" data-v-71b0e7b2="">注：专享券的使用期限在领券的七天内。</div>
          <div class="submit-btn" data-v-71b0e7b2="">一键领取</div>
        </div>
        <div class="model success" style="display:none;" data-v-71b0e7b2="">
          <div class="heading" data-v-71b0e7b2="">领取成功</div>
          <div class="content-text" data-v-71b0e7b2="">购买小册时自动使用专享券</div>
          <div class="btn-success-footer" data-v-71b0e7b2="">
            <div class="btn-ok" data-v-71b0e7b2="">知道了</div>
            <div class="btn-ok btn-link" data-v-71b0e7b2="">前往小册首页</div>
          </div>
        </div>
        <div class="model fail" style="display:none;" data-v-71b0e7b2="">
          <div class="heading" data-v-71b0e7b2="">领取失败</div>
          <div class="content-text" data-v-71b0e7b2="">本活动仅适用于小册新用户</div>
          <div class="btn-ok" data-v-71b0e7b2="">知道了</div>
        </div>
      </div>
      <!---->
    </div>
    <!---->
    <div data-v-097468bb="" data-v-514f306c="" class="book-read-view">
      <section data-v-097468bb="" class="book-section">
        <div data-v-097468bb="" class="book-summary">
          <div data-v-097468bb="" class="book-summary-masker"></div>
          <div data-v-097468bb="" class="book-summary-inner">
            <div data-v-097468bb="" class="book-summary__header"><a data-v-097468bb="" href="https://juejin.im/books"
                target="" rel="" class="logo"><img data-v-097468bb="" src="./1-小册食用指南_files/logo.a7995ad.svg"></a>
              <div data-v-097468bb="" class="label">小册</div>
              <!---->
            </div>
            <!---->
            <div data-v-d0eb2184="" data-v-097468bb="" class="book-directory book-directory bought">
              <a data-v-d0eb2184="" href="./1-小册食用指南.htm" class="section route-active section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">1</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">小册食用指南</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a>
              <a data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">2</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（一）</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./3-JS 基础知识点及常考面试题（二）.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">3</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">JS 基础知识点及常考面试题（二）</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./4-ES6 知识点及常考面试题.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">4</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">ES6 知识点及常考面试题</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./5-JS 异步编程及常考面试题.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">5</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">JS 异步编程及常考面试题</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./6-手写 Promise.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">6</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">手写 Promise</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./7-Event Loop.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">7</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">Event Loop</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./8-JS 进阶知识点及常考面试题.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">8</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">JS 进阶知识点及常考面试题</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./9-JS 思考题.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">9</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">JS 思考题</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./10-DevTools Tips.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">10</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">DevTools Tips</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./11-浏览器基础知识点及常考面试题.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">11</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">浏览器基础知识点及常考面试题</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./12-浏览器缓存机制.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">12</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">浏览器缓存机制</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./13-浏览器渲染原理.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">13</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">浏览器渲染原理</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./14-安全防范知识点.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">14</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">安全防范知识点</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./15-从 V8 中看 JS 性能优化.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">15</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">从 V8 中看 JS 性能优化</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./16-性能优化琐碎事.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">16</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">性能优化琐碎事</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./17-Webpack 性能优化.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">17</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">Webpack 性能优化</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./18-实现小型打包工具.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">18</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">实现小型打包工具</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./19-React 和 Vue 两大框架之间的相爱相杀.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">19</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">React 和 Vue 两大框架之间的相爱相杀</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./20-Vue 常考基础知识点.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">20</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">Vue 常考基础知识点</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./21-Vue 常考进阶知识点.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">21</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">Vue 常考进阶知识点</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./22-React 常考基础知识点.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">22</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">React 常考基础知识点</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./23-React 常考进阶知识点.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">23</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">React 常考进阶知识点</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./24-监控.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">24</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">监控</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./25-UDP.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">25</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">UDP</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./26-TCP.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">26</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">TCP</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./27-HTTP 及 TLS.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">27</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">HTTP 及 TLS</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./28-HTTP23.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">28</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">HTTP/2 及 HTTP/3</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./29-输入 URL 到页面渲染的整个流程.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">29</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">输入 URL 到页面渲染的整个流程</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./30-设计模式.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">30</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">设计模式</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./31-常见数据结构.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">31</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">常见数据结构</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./32-常考算法题解析.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">32</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">常考算法题解析</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./33-CSS 常考面试题资料.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">33</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">CSS 常考面试题资料</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./34-如何写好一封简历.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">34</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">如何写好一封简历</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./35-面试常用技巧.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">35</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">面试常用技巧</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a><a href="./36-前方的路，让我们结伴同行.htm" data-v-d0eb2184="" class="section section-link">
                <div data-v-d0eb2184="" class="step">
                  <div data-v-d0eb2184="" class="step-btn">36</div>
                </div>
                <div data-v-d0eb2184="" class="center">
                  <div data-v-d0eb2184="" class="title">前方的路，让我们结伴同行</div>
                  <!---->
                  <!---->
                </div>
                <!---->
              </a></div>
            <div data-v-097468bb="" class="book-summary__footer">
              <div data-v-097468bb="" class="qr-icon"><img data-v-097468bb=""
                  src="./1-小册食用指南_files/qr-icon.881015a.svg"></div>
              <div data-v-097468bb="" class="qr-tips"><span data-v-097468bb="" class="ion-close"></span>
                <div data-v-097468bb="" class="title"><span data-v-097468bb="">关注公众号</span><span
                    data-v-097468bb="">领取优惠码</span></div>
                <div data-v-097468bb="" class="qr-img"><img data-v-097468bb="" src="./1-小册食用指南_files/wx-qr.13d8b4d.png">
                </div>
              </div>
            </div>
          </div>
        </div>
        <div data-v-097468bb="" class="book-content">
          <div data-v-097468bb="" class="book-content-inner">
            <div data-v-097468bb="" class="book-content__header visible">
              <div data-v-097468bb="" class="switch"><img data-v-097468bb="" src="./1-小册食用指南_files/icon.3e69d5a.svg">
              </div>
              <div data-v-097468bb="" class="menu"><img data-v-097468bb="" src="./1-小册食用指南_files/menu.74b9add.svg">
              </div>
              <div data-v-097468bb="" class="title"><a data-v-097468bb=""
                  href="https://juejin.im/book/5bdc715fe51d454e755f75ef" target="" rel="">前端面试之道</a></div>
              <div data-v-629272fe="" data-v-097468bb="" class="user-auth user-auth">
                <div data-v-629272fe="" class="nav-item menu">
                  <div data-v-3b1ba6d2="" data-v-afcc6e34="" data-v-629272fe=""
                    data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg"
                    class="lazy avatar avatar loaded"
                    style="background-image: url(&quot;https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg&quot;);">
                  </div>
                  <div data-v-629272fe="" class="nav-menu user-dropdown-list" style="display: none;">
                    <ul data-v-629272fe="" class="nav-menu-item-group">
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe=""
                            class="fengwei fw-write"></i><span data-v-629272fe="">写文章</span></a></li>
                      <!---->
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe=""
                            class="fengwei fw-draft"></i><span data-v-629272fe="">草稿</span></a></li>
                    </ul>
                    <ul data-v-629272fe="" class="nav-menu-item-group">
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a"><i data-v-629272fe=""
                            class="fengwei fw-person"></i><span data-v-629272fe="">我的主页</span></a></li>
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/likes"><i data-v-629272fe=""
                            class="fengwei fw-like"></i><span data-v-629272fe="">我喜欢的</span></a></li>
                      <!---->
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/collections"><i data-v-629272fe=""
                            class="fengwei fw-collection"></i><span data-v-629272fe="">我的收藏集</span></a></li>
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/user/5c2c54ca6fb9a049cb18da5a/books?type=bought"><i data-v-629272fe=""
                            class="fengwei fw-bought"></i><span data-v-629272fe="">已购</span></a></li>
                      <!---->
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/subscribe"><i data-v-629272fe="" class="fengwei fw-tag"></i><span
                            data-v-629272fe="">标签管理</span></a></li>
                    </ul>
                    <ul data-v-629272fe="" class="nav-menu-item-group">
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                          href="https://juejin.im/user/settings"><i data-v-629272fe=""
                            class="fengwei fw-setting"></i><span data-v-629272fe="">设置</span></a></li>
                      <li data-v-629272fe="" class="nav-menu-item more"><a data-v-629272fe=""><i data-v-629272fe=""
                            class="fengwei fw-info"></i><span data-v-629272fe="">关于</span><i data-v-629272fe=""
                            class="ion-chevron-right more-icon"></i></a>
                        <div data-v-629272fe="" class="nav-menu more-dropdown-list">
                          <ul data-v-629272fe="" class="nav-menu-item-group">
                            <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                                href="https://juejin.im/app" target="_blank">下载应用</a></li>
                            <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                                href="https://juejin.im/about" target="_blank">关于</a></li>
                            <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                                href="https://xitu.io/jobs" target="_blank">加入我们</a></li>
                            <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                                href="https://github.com/xitu/gold-miner" rel="nofollow noopener noreferrer"
                                target="_blank">翻译计划</a></li>
                            <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""
                                href="https://bd.juejin.im/?utm_campaign=bd&amp;utm_source=web&amp;utm_medium=nav"
                                target="_blank">合作伙伴</a></li>
                          </ul>
                        </div>
                      </li>
                    </ul>
                    <ul data-v-629272fe="" class="nav-menu-item-group">
                      <li data-v-629272fe="" class="nav-menu-item"><a data-v-629272fe=""><i data-v-629272fe=""
                            class="fengwei fw-logout"></i><span data-v-629272fe="">登出</span></a></li>
                    </ul>
                  </div>
                </div>
                <!---->
              </div>
              <!---->
            </div>
            <div data-v-097468bb="" class="book-body transition--prev">
              <div data-v-5602b343="" data-v-097468bb="" class="section-view book-section-content">
                <div data-v-05bbf43a="" data-v-5602b343="" class="section-content">
                  <div data-v-05bbf43a="" class="section-page book-section-view">
                    <div data-v-05bbf43a="" class="entry-content article-content">
                      <h1 class="heading" data-id="heading-0">小册食用指南</h1>
                      <p>这本小册涉及的内容十分广，在这里我提供了一份小册的<strong>食用指南</strong>，帮助你更好地阅读小册。</p>
                      <p>无论是你刚刚开始学习小册还是想复习小册内容，这份食用指南都能很好地帮助到你。</p>
                      <h2 class="heading" data-id="heading-1">购买前警告⚠️</h2>
                      <ul>
                        <li>此小册不适合完全没有前端基础的人阅读，需要各位掌握基本的 HTML、JS，担心小册质量或者是内容是否适合自己的，请先浏览试读章节再做购买决定</li>
                        <li>小册还在预售中，所以内容是还没有完结的，但是大家不需要担心作者是否会跑路的问题。因为小册没有完结之前，钱都是在掘金手里的，只有当完结内容才会和作者结账。</li>
                        <li>此小册不会让你的技术一蹴而就，直接从三线公司跳到一线大厂，想进大公司必定是需要个人实力足够才行，当然小册的内容应付一般的公司完全没什么问题。</li>
                      </ul>
                      <h2 class="heading" data-id="heading-2">发售福利</h2>
                      <p><strong>当下预售售价为 39.9 元，小册完结后将会提价到 49.9 元</strong></p>
                      <p>欢迎大家在交流群中多交流学习及面试相关的内容，目前群内交流气氛很浓厚，通过交流可以了解到很多面试相关的内容。</p>
                      <p></p>
                      <figure><img class="lazyload inited loaded"
                          data-src="https://user-gold-cdn.xitu.io/2018/12/23/167d9f9781c40192?imageView2/0/w/1280/h/960/format/webp/ignore-error/1"
                          data-width="761" data-height="225" src="./1-小册食用指南_files/167d9f9781c40192">
                        <figcaption>加群途径</figcaption>
                      </figure>
                      <p></p>
                      <h2 class="heading" data-id="heading-3">内容</h2>
                      <p>
                        在今年，我搜集了各大公司的面试题，有自己去面试获得的，也有身边的朋友分享给我的。我一直认为，<strong>面向题目应对面试是没什么大的帮助的</strong>，即使有，也只是<strong>治标不治本</strong>。
                      </p>
                      <p>
                        因为每道面试题背后都会涉及到几个<strong>知识点</strong>，如果我们能够<strong>扎实</strong>地学习这些知识点的话，那么无论题目怎么变，只要涉及的知识点不变，那我们就能<strong>以不变应万变</strong>。
                      </p>
                      <p>
                        所以，我将这些收罗到的面试题背后所涉及的知识点一一<strong>提炼</strong>出来，并整理出了<strong>常考</strong>的知识点。当然小册所涉及的内容远远不止常考的知识点，还包罗了一部分我认为重要的知识点（虽然考的不多）、面试技巧和学习资料。
                      </p>
                      <p>
                        总的来说，整本小册涉及到了<strong>十四</strong>个模块，每一模块中又包含了许许多多的知识点。每一模块都自成体系但是又会与其他模块中的内容有交集。比如说浏览器、Webpack、网络协议这几个模块中涉及到的部分内容和性能优化模块是相互关联的。
                      </p>
                      <p>
                        如果你是<strong>刚刚</strong>开始阅读小册的内容，可以根据自己的薄弱点，<strong>对症下药</strong>，学习相应的模块。但是学习单个模块中的内容时不推荐跳着阅读，因为很可能后面的内容与之前的有所联系，没有理解之前的知识点的话，可能会对后续的学习会造成困扰。
                      </p>
                      <p>在你学习的过程中，我又给大部分的知识点提供了 <strong>1 - 3</strong>
                        道面试题，你可以通过学习知识点的方式尝试自己去攻克面试题。当你学习完整个模块后，我又提供了几道思考题，帮助你检验自身的学习成果，<strong>查漏补缺</strong>。</p>
                      <p>
                        小册的内容会<strong>持续的更新（更新日志都放在首页）</strong>，毕竟面试涉及的知识点很广，内容可能会存在勘误或者不清楚的地方，并且前端技术更新很快，我会尽可能的让小册内容符合当下最新的技术。<strong>可预见的是
                          Vue 3.0 更新以后，小册中关于 Vue 的内容势必也会更新</strong>。如果你是在非官方渠道阅读到这本小册的话，为了你学习到的内容符合当下，你可以选择 <a
                          target="_blank"
                          href="https://juejin.im/book/5bdc715fe51d454e755f75ef?referrer=574f8d8d2e958a005fd4edac"
                          rel="">支持正版，购买小册</a>。</p>
                      <p>
                        最后，学习知识一定要配合<strong>实践</strong>，没有实践的知识是没有<strong>灵魂</strong>的。另外，碍于篇幅，我不可能深挖每个知识点，所以推荐大家去尝试挖掘我没有涉及到的内容。
                      </p>
                      <h2 class="heading" data-id="heading-4">思考题</h2>
                      <p>在大部分的模块内容结束后，我都提供了几道思考题。虽然每道思考题通过题意我们可能只能理解到背后所考的 1 - 2 个知识点，但是其实很多知识点是有<strong>串联</strong>关系的。
                      </p>
                      <p>
                        在面试过程中，如果经常和面试官出现<strong>一问一答</strong>的情况的话，其实是不够理想的。虽然一道面试题看起来只涉及了一个知识点，但是如果你脑海中的知识点是串联起来的话，就可以<strong>引申</strong>出其他的知识点，这样能给到面试官一个好的印象。
                      </p>
                      <p>每道思考题我都给出了一些个人的<strong>思路引导</strong>，帮助大家建立起知识点之间的串联关系，彻底理解这个模块中所涉及到的知识点。</p>
                      <h2 class="heading" data-id="heading-5">记录与分享</h2>
                      <p>
                        我个人写博客已经持续了三年了。写博客是一个很好的习惯，一方面能<strong>帮助自己理解知识</strong>，另一方面也能<strong>打造个人的影响力</strong>，所以我也很推荐大家能养成这个习惯。
                      </p>
                      <p>
                        为了推动大家更有动力的去记录与分享，我后面会单独用一个章节的内容去存放我认为写的不错的博客。如果你想对知识点有所记录，或者分享解答面试题、思考题的个人理解，都可以在评论中给出你的分享地址。我都会<strong>认真</strong>地去阅读，挑选出好的内容<strong>单独</strong>放入一个章节中，这样就有更多的人能看到你的分享。
                      </p>
                      <p>
                        最后，这本小册不一定能让你在很短的时间内就让你的技术一夜突飞猛进，但是如果你能<strong>细细阅读</strong>的话，绝对能让你醍醐灌顶。好了，食用指南结束了，接下来让我们进入小册的<strong>知识海洋</strong>吧。
                      </p>
                    </div>
                    <section data-v-05bbf43a="" class="book-comments">
                      <div data-v-05bbf43a="" class="box-title">留言</div>
                      <div data-v-05bbf43a="" class="comment-box">
                        <div data-v-81313b1e="" data-v-05bbf43a="" class="comment-form comment-form" id="comment">
                          <div data-v-3b1ba6d2="" data-v-afcc6e34="" data-v-81313b1e=""
                            data-src="https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg"
                            class="lazy avatar avatar loaded"
                            style="background-image: url(&quot;https://b-gold-cdn.xitu.io/v3/static/img/default-avatar.e30559a.svg&quot;);">
                          </div><textarea data-v-81313b1e="" placeholder="评论将在后台进行审核，审核通过后对所有人可见" class="content-input"
                            style="overflow: hidden; overflow-wrap: break-word; height: 60px;"></textarea>
                          <div data-v-81313b1e="" class="action-box" style="display: none;">
                            <div data-v-680eb36d="" data-v-81313b1e="" class="image-uploader image-uploader"
                              style="display: none;"><input data-v-680eb36d="" type="file" class="input"><button
                                data-v-680eb36d="" class="upload-btn"><i data-v-680eb36d=""
                                  class="icon ion-image"></i><span data-v-680eb36d="">上传图片</span></button></div>
                            <div data-v-81313b1e="" class="submit-box"><span data-v-81313b1e="" class="submit-text">Ctrl
                                or ⌘ + Enter</span><button data-v-81313b1e="" class="submit-btn">评论</button></div>
                          </div>
                          <!---->
                        </div>
                      </div>
                      <ul data-v-32e5a55b="" data-v-05bbf43a="" st:block="commentList"
                        class="comment-list comment-list">
                        <!---->
                      </ul>
                    </section>
                  </div>
                </div>
                <!---->
                <!---->
              </div>
            </div>
            <div data-v-a9263a68="" data-v-097468bb="" class="book-handle book-direction">
              <!---->
              <div data-v-a9263a68="" class="step-btn step-btn--next"><img data-v-a9263a68=""
                  src="./1-小册食用指南_files/next.54d8a35.svg"></div>
              <!---->
              <!---->
            </div>
            <!---->
          </div>
        </div>
      </section>
      <!---->
      <!---->
      <!---->
      <div data-v-1b0b9cb8="" data-v-097468bb="" class="image-viewer-box">
        <!---->
      </div>
    </div>
    <!---->
  </div>


  <script type="text/javascript" src="./1-小册食用指南_files/runtime.5902a8b1cc2b7567f479.js.下载"></script>
  <script type="text/javascript" src="./1-小册食用指南_files/0.e205fcdd4d4b6767f462.js.下载"></script>
  <script type="text/javascript" src="./1-小册食用指南_files/1.cbb1f8f5dcdee0086c6a.js.下载"></script>
</body>

</html>
